<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.item {
			width: 100px;
			height: 100px;
			border: 1px solid green;
			float: left;
		}
		
		#diagramContainer {
			padding: 20px;
			width: 80%;
			height: 400px;
			border: 1px solid gray;
			background-image: url(http://p3alsaatj.bkt.clouddn.com/20180227163310_1bVYeW_grid.jpeg);
			background-repeat: repeat;
		}
	</style>

	<body>
		<div id="diagramContainer">
			<div id="item_left" class="item"></div>

			<div id="item_right" class="item" style="margin-top: 200px;margin-left:150px;"></div>

			<button type="text" id="name" style="height: 80px;margin:200px 200px ;" onclick="alert('HHH')">哈哈哈哈哈哈哈</button>
		</div>
		<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>

		<script>
			/* global jsPlumb */
			jsPlumb.importDefaults({
				ConnectionsDetachable: false
			})
			jsPlumb.ready(function() {
				jsPlumb.connect({
					isSource: false,
					isTarget: false,
					source: 'item_left',
					target: 'item_right',
					endpoint: 'Rectangle',
					connector: ['Bezier'],
					anchor: ['Left', 'Right']
				})
				jsPlumb.connect({
					//					anchors: ['Right'],
					source: 'item_right',
					target: 'name',
					endpoint: 'Rectangle',
					connector: ['Bezier'],
					anchor: ['Left', 'Right']
				})
				jsPlumb.draggable('item_left');
				jsPlumb.draggable('item_right');
			})
		</script>
	</body>

</html>